<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
  <button>测试拦截器</button>

  <script>
    /* 
    为什么设计拦截器语法?  需求:
    1. 所有请求都携带一个特定的请求头
    2. 所有请求发出去前打印一个日志输出
    3. 所有请求成功的value都是响应体, 直接得到response.data
    4. 所有请求失败了, 我做一个统一的错误提示
    */

    /* 
    二次封装axios   本身axios是一层封装
    配置基础路径和超时时间
    */

    const request = axios.create({
      baseURL : 'http://localhost:8081',
      timeout: 3000
    })



    // 添加请求拦截器
    request.interceptors.request.use((config)=>{
      console.log('请求拦截器的回调');

      // 1.所有请求都携带一个特定的请求头
      config.headers['theshy'] = 'ts'
      // 2. 所有请求发起前 打印一个输出 当前时间和url地址
      console.log('请求:' ,Date.now(), config.url);
      return config // 必须返回config
    })


    // 添加响应拦截器
    request.interceptors.response.use(
      // 成功回调
      response =>{
        console.log('响应拦截器成功回调');
        // 3.所有请求成功 的value都是响应体 要直接得到response.data
        return response.data
      },
      // 失败回调
      error => {
        console.log('响应拦截器失败回调');
        // 4. 所有请求失败 作统一的错误提示
        alert('请求错误' + error.message)

        // 将错误向下传递 两个选一个  
        // throw error
        return Promise.reject(error)
      }
    )



    const btn = document.querySelector('button');

    btn.onclick = function () {

      request({
        url:'/delay-server/aaa',
        method: 'post',
        params: {a:1 ,b :2 },
        data:{c: 3 , d:4}
      }).then(
        response =>{
          console.log('具体的请求成功回调' , response);
        },
        error => {
          console.log('具体的请求失败回调', error);
        }
      )
    };
  </script>
</body>

</html>